<script setup>
import { ref, onMounted } from 'vue';
import { ArrowLeftBold, ArrowRight, ArrowRightBold } from "@element-plus/icons-vue";
import router from "@/router";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRoute} from "vue-router";
import axios from "axios";



const textarea = ref('')
const username = ref('')
const userid = ref('')
const password = ref('')
const password2 = ref('')
const email = ref('')
const location = ref('')
const welfare=ref('')
const info = ref('')
const currentCard = ref(null);
const select = ref('+86');
const age=ref('')
const gender=ref('')
const identity=ref('')
const ethnic=ref('')

const fileList = ref([
])
const handleRegister=(s)=>{
  if (s === 'seek') {
          userid.value = select.value+userid.value;
        // 调用 API 发送登录请求
        axios.post('http://localhost:8082/seeker/signup', {
          seekerid: userid.value,
          seekerpassword: password.value,
          seekername:username.value,
          email:email.value,
          phone:userid.value,
          age:age.value,
          gender:gender.value,
          identity:identity.value,
          ethnic:ethnic.value
        }, {
          headers: {
            'Content-Type': 'application/json',
          },
        }).then(response => {
          if (response.data.success) {
            console.log(response.data.data);
            localStorage.setItem('dataFromPreviousPage', JSON.stringify(response.data.data));
              localStorage.setItem('seekerId', userid.value);
            router.push('/first');
          } else {
            alert('登录失败，请检查手机号和验证码');
          }
        }).catch(error => {
          console.error('登录时出错:', error);
          alert('登录出错，请稍后重试');
        });
      }
      if(s==='recruit'){
        axios.post('http://localhost:8082/enterprise/signup', {
          enterprisename: username.value,
          enterprisepassword: password.value,
          location:location.value,
          bussinessinformation:info.value,
          welfare:welfare.value
        }, {
          headers: {
            'Content-Type': 'application/json',
          },
        }).then(response => {
          if (response.data.success) {
            console.log(response.data.data);
            localStorage.setItem('dataFromPreviousPage', JSON.stringify(response.data.data));
            localStorage.setItem('userId', response.data.data.enterpriseid);
            router.push('/recruit');
          } else {
            alert('登录失败，请检查企业账号和验证码');
          }
        }).catch(error => {
          console.error('登录时出错:', error);
          alert('登录出错，请稍后重试');
        });
      }
}

const handleRemove = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview = (uploadFile) => {
  console.log(uploadFile)
}

const handleExceed = (files, uploadFiles) => {
  ElMessage.warning(
      `The limit is 1, you selected ${files.length} files this time, add up to ${
          files.length + uploadFiles.length
      } totally`
  )
}

const beforeRemove = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
      `Cancel the transfer of ${uploadFile.name} ?`
  ).then(
      () => true,
      () => false
  )
}

onMounted(() => {
  const route = useRoute();
  currentCard.value = route.query.s;
  console.log(currentCard);
    console.log(route.query.s)
  console.log(currentCard)
});
</script>

<template>
  <form class="body1" v-if="currentCard === 'seek'" style="background-color: #3F72AF;background-size: cover;">
    <el-row justify="center">
      <el-col :span="20" style="justify-content: center;text-align: center;">
        <h1>注册</h1>
        <form class="card3" style="background-color: #f9f7f7;text-align: start">
          <el-row>
            <h2 style="margin-top: 20px;margin-left: 150px;margin-right: 5px;">账号/手机号</h2>
            <el-input v-model="userid" style="width: 400px;height:42px;margin-top: 20px;margin-left: 20px;margin-right: auto;" placeholder="账号/手机号" class="input-with-select1">
             <template #prepend>
                <el-select v-model="select" placeholder="" size="large" style="width: 115px;">
                  <el-option label="+86" value="1" />
                  <el-option label="+852" value="2" />
                  <el-option label="+853" value="3" />
                  <el-option label="+886" value="4" />
                </el-select>
             </template></el-input>
          </el-row>
          <el-row>
            <h2 style="margin-top: 20px;margin-left: 230px;margin-right: 5px;">密码</h2>
            <el-input v-model="password" type="password" style="width: 400px;height:42px;margin-top: 20px;margin-left: 20px;margin-right: auto;" placeholder="密码" />
          </el-row>

          <el-row>
            <h2 style="margin-top: 20px;margin-left: 135px;margin-right: 5px;">再次输入密码</h2>
            <el-input v-model="password2" type="password" style="width: 400px;height:42px;margin-top: 20px;margin-left: 20px;margin-right: auto;" placeholder="密码" />
          </el-row>
            <el-row>
            <h2 style="margin-top: 20px;margin-left: 230px;margin-right: 5px;">姓名</h2>
            <el-input v-model="username" style="width: 400px;height:42px;margin-top: 20px;margin-left: 20px;margin-right: auto;" placeholder="姓名" />
          </el-row>
            <el-row>
            <h2 style="margin-top: 20px;margin-left: 230px;margin-right: 5px;">年龄</h2>
            <el-input v-model="age" style="width: 400px;height:42px;margin-top: 20px;margin-left: 20px;margin-right: auto;" placeholder="年龄" />
          </el-row>
            <el-row>
            <h2 style="margin-top: 20px;margin-left: 230px;margin-right: 5px;">性别</h2>
            <el-input v-model="gender" style="width: 400px;height:42px;margin-top: 20px;margin-left: 20px;margin-right: auto;" placeholder="性别" />
          </el-row>
            <el-row>
            <h2 style="margin-top: 20px;margin-left: 185px;margin-right: 5px;">政治面貌</h2>
            <el-input v-model="identity" style="width: 400px;height:42px;margin-top: 20px;margin-left: 20px;margin-right: auto;" placeholder="政治面貌" />
          </el-row>
             <el-row>
            <h2 style="margin-top: 20px;margin-left: 230px;margin-right: 5px;">民族</h2>
            <el-input v-model="ethnic" style="width: 400px;height:42px;margin-top: 20px;margin-left: 20px;margin-right: auto;" placeholder="民族" />
          </el-row>
          <el-row>
            <h2 style="margin-top: 20px;margin-left: 135px;margin-right: 5px;">邮箱（选填）</h2>
            <el-input v-model="email"  style="width: 400px;height:42px;margin-top: 20px;margin-left: 20px;margin-right: auto;" placeholder="邮箱" />
          </el-row>
        </form>
         <el-row justify="center" style="margin-top: 20px">
      <el-button class="btn1" @click="handleRegister('seek')">注册</el-button>
    </el-row>
      </el-col>

    </el-row>

  </form>

  <form class="body1" v-if="currentCard === 'recruit'" style="background-color: #3F72AF;background-size: cover;">
    <el-row justify="center">
      <el-col :span="24" style="justify-content: center;text-align: center;">
        <h1>注册</h1>
        <form class="card3" style="background-color: #DBE2EF;text-align: start">
            <el-row>
            <h2 style="margin-top: 50px;margin-left: 185px;margin-right: 5px;">企业名称</h2>
            <el-input v-model="username" style="width: 400px;height:42px;margin-top: 50px;margin-left: 70px;margin-right: auto;" placeholder="企业名称" />
          </el-row>
          <el-row>
            <h2 style="margin-top: 20px;margin-left: 230px;margin-right: 5px;">密码</h2>
            <el-input v-model="password" type="password" style="width: 400px;height:42px;margin-top: 20px;margin-left: 70px;margin-right: auto;" placeholder="密码" />
          </el-row>
          <el-row>
            <h2 style="margin-top: 20px;margin-left: 135px;margin-right: 5px;">再次输入密码</h2>
            <el-input v-model="password2" type="password" style="width: 400px;height:42px;margin-top: 20px;margin-left: 70px;margin-right: auto;" placeholder="密码" />
          </el-row>
          <el-row>
            <h2 style="margin-top: 20px;margin-left: 180px;margin-right: 5px;">公司位置</h2>
            <el-input v-model="location"  style="width: 400px;height:42px;margin-top: 20px;margin-left: 70px;margin-right: auto;" placeholder="公司位置" />
          </el-row>
          <el-row>
            <h2 style="margin-top: 20px;margin-left: 180px;margin-right: 5px;">营业执照</h2>
            <el-upload
                v-model:file-list="fileList"
                class="upload-demo"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit="1"
                :on-exceed="handleExceed"
            >
              <el-button class="btn1">点击上传</el-button>
            </el-upload>
          </el-row>
          <el-row>
            <h2 style="margin-top: 20px;margin-left: 180px;margin-right: 5px;">企业福利</h2>
             <el-input v-model="welfare"  style="width: 400px;height:42px;margin-top: 20px;margin-left: 70px;margin-right: auto;" placeholder="企业福利" />
          </el-row>
          <el-row>
            <h2 style="margin-top: 20px;margin-left: 180px;margin-right: 5px;">经营领域</h2>
             <el-input v-model="info"  style="width: 400px;height:42px;margin-top: 20px;margin-left: 70px;margin-right: auto;" placeholder="经营领域" />
          </el-row>
          <el-row justify="center" style="margin-top: 120px">
            <el-button class="btn1" @click="handleRegister('recruit')">注册</el-button>
          </el-row>

        </form>
      </el-col>
    </el-row>
  </form>
</template>

<style scoped>
@import "../assets/css/global.css";
.input-with-select1:deep(.el-input__wrapper) {
  background-color: #f9f7f7;/*覆盖原背景颜色，设置成透明 */
  border-radius: 0 10px 10px 0;
  outline: #3F72AF 1px solid;
}
:deep(.el-input-group__prepend) {
  background-color: #f9f7f7;/*覆盖原背景颜色，设置成透明 */
  border-radius: 10px 0  0 10px;
  outline: #3F72AF 1px solid;
}
:deep(.el-input__wrapper){
  background-color: #f9f7f7;/*覆盖原背景颜色，设置成透明 */
  border-radius: 10px;
  outline: #3F72AF 1px solid;
}
.button-group {
  display: flex;
  gap: 100px; /* 按钮之间的间隔 */
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  justify-content: center;
}

button {
  padding: 10px 40px;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 15px;
}

/* 活动状态按钮样式 */
.active {
  background-color: #3F72AF; /* 蓝色背景 */
  color: #f9f7f7; /* 白色文字 */
}

/* 非活动状态按钮样式 */
.inactive {
  background-color: #f9f7f7; /* 白色背景 */
  color: #3F72AF; /* 蓝色文字 */
}
.high_year{
  font-size: 24px;
  font-weight: bold;
  color: black;
  background-color: rgba(52,124,175,0.11);
}
.year{
  font-size: 22px;
  color: #444444;
}
.low_year{
  font-size: 16px;
  color: #888888;
}
.btn1 {
  padding: 20px 40px;
  border: none;
  background-color: #f9f7f7;
  color: #3F72AF;
  font-size: 24px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 10px;
  margin:20px;
  margin-left: 70px;
}
.btn1:hover{
  background-color: #3F72AF;
  color: #f9f7f7;
}
/* 活动状态按钮样式 */
.btn.active {
  background-color: #3F72AF; /* 蓝色背景 */
  color: #f9f7f7; /* 白色文字 */
}

/* 非活动状态按钮样式 */
.btn.inactive {
  background-color: #f9f7f7; /* 白色背景 */
  color: #3F72AF; /* 蓝色文字 */
}
.card3 {
    margin: auto;
    text-align: center;
    justify-content: center;
    width: 936px;
    height: 650px;
    border: #bbbbbb solid 1px;
    border-radius: 50px;
    background: #DBE2EF;
    box-shadow: 15px 15px 20px 2px #444444;
    z-index: 1; /* 确保card2层级低于card1 */
}
</style>d